<template>
  <div>
    <q-form class="sc-edit">
      <q-card square flat class="q-mt-lg q-pt-md q-pb-lg">
        <!-- <q-separator spaced="15px" /> -->
        <div class="eltable-top q-px-lg">
          <q-input
            clearable
            outlined
            dense
            placeholder="请输入关键字搜索"
            class="on-left"
            @input="query"
            debounce="500"
            v-model="key"
          >
            <template #append>
              <q-btn
                flat
                round
                icon="search"
                color="primary"
                @click="query"
                :loading="tableOptions.tableLoading"
              >
                <q-tooltip>搜索</q-tooltip>
              </q-btn>
            </template>
          </q-input>
          <div>
            <q-btn rounded flat dense icon="add" @click="add">
              <q-tooltip>新建</q-tooltip>
            </q-btn>
          </div>
        </div>
        <div class="q-pt-sm q-px-lg">
          <el-table
            :data="tableOptions.columnDatas"
            style="width: 100%"
            row-key="id"
            :header-cell-style="{
              height: '48px',
              color: '#000',
              fontWeight: '500',
            }"
            :cell-style="{ height: '48px', fontSize: '14px' }"
            v-loading="tableOptions.tableLoading"
            v-model:pagination="initialPagination"
            @request="onRequest"
          >
            <el-table-column prop="name" label="菜单名称" min-width="100">
              <template #default="scope">
                <el-tooltip
                  :content="scope.row.name"
                  raw-content
                  placement="top-start"
                  v-if="scope.row.name"
                >
                  <span v-if="scope.row.name && scope.row.name.length <= 10">
                    {{ scope.row.name }}
                  </span>

                  <span v-if="scope.row.name && scope.row.name.length > 10">
                    {{ scope.row.name.substr(0, 10) + '...' }}
                  </span>
                </el-tooltip>
                <span v-else-if="scope.row.name == null"> NA </span>
              </template>
            </el-table-column>
            <el-table-column prop="is_menu" label="菜单类型">
              <template #default="scope">
                <span>
                  {{ scope.row.is_menu == 0 ? '非菜单' : '菜单' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="api_path" label="接口路由" />
            <el-table-column prop="view_path" label="页面路由" />
            <el-table-column prop="sort" label="排序" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <span>
                  {{ scope.row.status == 0 ? '隐藏' : '显示' }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="140">
              <template #default="scope">
                <q-btn
                  v-show="scope.row.is_menu == 1"
                  flat
                  round
                  dense
                  color="primary"
                  icon="add"
                  @click="addChildren(scope.row.id, scope.row)"
                >
                  <q-tooltip>添加</q-tooltip>
                </q-btn>

                <q-btn
                  flat
                  round
                  dense
                  color="primary"
                  icon="edit"
                  @click="edit(scope.row.id, scope.row)"
                >
                  <q-tooltip>编辑</q-tooltip>
                </q-btn>

                <q-btn
                  flat
                  round
                  dense
                  class="q-mx-xs"
                  color="negative"
                  icon="delete"
                >
                  <q-menu
                    transition-show="jump-up"
                    transition-hide="jump-down"
                    content-class="text-center"
                    self="bottom left"
                    anchor="top left"
                    :offset="[60, 5]"
                  >
                    <div class="q-px-sm q-pt-md">
                      <q-icon name="info" color="warning" class="q-mr-sm" />
                      是否要删除此行?
                    </div>
                    <div class="q-gutter-x-sm q-pt-sm q-pb-md">
                      <q-btn
                        color="grey-6"
                        unelevated
                        class="no-border-radius text-body2"
                        padding="2px sm"
                        dense
                        label="取消"
                        v-close-popup
                      ></q-btn>
                      <q-btn
                        color="primary"
                        unelevated
                        class="no-border-radius text-body2"
                        padding="2px sm"
                        dense
                        label="确认"
                        @click="deleteData(scope.row.id, scope.row)"
                        v-close-popup
                      ></q-btn>
                    </div>
                  </q-menu>
                </q-btn>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </q-card>
    </q-form>
    <yq-dialog v-model:lockDialog="lockDialog" :title="title">
      <template v-slot:yq_dialog_body>
        <power-dialog
          :form="formRole"
          @backList="powerlist(initialPagination)"
          :useroptions="useroptions"
      /></template>
    </yq-dialog>
  </div>
</template>

<script setup lang="ts">
import { powerData, pageInit } from '../mocklist';
import { powerList, deletePower } from '@/api/basic';
import PowerDialog from './PowerDialog.vue';
import { Ref } from 'vue';
import { useQuasar } from 'quasar';
import _ from 'lodash';

// let advancedFormData = reactive(powerData);
// console.log('2322222', advancedFormData);
interface formRoleProps {
  name?: string;
  api_path?: string;
  view_path?: string;
  sort?: number;
  status?: number;
  is_menu?: number;
  pid?: number;
}

const tableOptions = reactive({
  tableLoading: false,
  ...powerData,
});
const initialPagination = ref(_.cloneDeep(pageInit));

const lockDialog = ref(false);
const title = ref('新建角色');
const formRole: Ref<formRoleProps> = ref({});
const key = ref('');
const $q = useQuasar();
const useroptions: any = ref([]);

// const save = (index: number) => {
//   console.log(index);
// };
const add = () => {
  title.value = '新建菜单/路由';
  formRole.value = { status: 1, is_menu: 1, pid: 0 };
  lockDialog.value = true;
};
const addChildren = (index: number, item: any) => {
  console.log('添加子集', item);
  title.value = '添加';
  formRole.value = { status: 1, is_menu: 1, pid: item.id };
  lockDialog.value = true;
};
const query = () => {
  console.log('query');
};

//页码发生改变，触发事件
const onRequest = (props: any) => {
  console.log('页码改变', props);
  const { page, rowsPerPage, rowsNumber } = props.pagination;
  initialPagination.value.page = page;
  initialPagination.value.rowsPerPage = rowsPerPage;
  initialPagination.value.per_page = rowsPerPage;
  initialPagination.value.rowsNumber = rowsNumber;

  powerlist(initialPagination.value);
};

const edit = (index: number, item: any) => {
  lockDialog.value = true;
  title.value = '编辑路由';
  formRole.value = _.cloneDeep(item);
  console.log('edit', index, item, formRole);
};
const deleteData = async (index: number, item: any) => {
  const res: any = await deletePower({ id: item.id });
  if (res.code == 200) {
    $q.notify({
      color: 'white',
      textColor: 'positive',
      icon: 'check_circle',
      position: 'top',
      message: res.msg,
    });
    initialPagination.value = pageInit;
    powerlist(initialPagination.value);
  }
};

const powerlist = async (pagination: any) => {
  lockDialog.value = false;
  tableOptions.tableLoading = true;
  const res: any = await powerList(pagination);
  tableOptions.tableLoading = false;
  tableOptions.columnDatas = res.data;
  initialPagination.value.rowsNumber = res.data.total;
  useroptions.value = res.data;
  console.log('res------------', res, tableOptions);
};
onMounted(() => {
  powerlist(initialPagination.value);
});
</script>

<style scoped lang="scss">
.sc-design .sc-edit .q-item__section--side {
  padding-right: 0;
}

.q-field--dense .q-field__control {
  padding: 0 5px;
  height: 28px;
  .q-field__marginal {
    height: 28px;
  }
}
.q-field--auto-height .q-field--dense .q-field__control,
.q-field__native {
  min-height: 28px;
}
.q-gutter-x-sm,
.q-gutter-sm {
  margin-left: 15px;
}
::v-deep(.my-special-class) {
  height: 48px;
  background: #fafafa;
}
::v-deep(.my-special-class th) {
  font-size: 16px;
}
::v-deep(table tr span.el-tooltip__trigger) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
::v-deep(.el-table th) {
  background: #f5f5f5 !important;
}
.eltable-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-top: 8px;
}
::v-deep(.el-table.is-scrolling-none th.el-table-fixed-column--right) {
  background: #f5f5f5 !important;
}
</style>
